<div ng-if="!events">
  Loading...
</div>
<div ng-if="events">
  <div class="table-toolbar form-inline">
    <div class="form-group filter-controls">
      <label for="events-filter" class="sr-only">Filter</label>
      <input type="search"
             placeholder="Filter by keyword"
             class="form-control"
             id="events-filter"
             ng-model="filter.text">
    </div>
    <div class="vertical-divider"></div>
    <!-- TODO: Change to pf-sort in angular-patternfly 3.0 -->
    <div pf-sort config="sortConfig" class="sort-controls"></div>
  </div>
  <table class="table table-bordered table-condensed table-mobile table-hover events-table">
    <thead>
      <tr>
        <th id="time">Time</th>
        <!-- Only show Name and Kind columns if not passed to the directive. -->
        <th id="kind-name" ng-if="!resourceKind || !resourceName">
          <span class="hidden-xs-inline visible-sm-inline visible-md-inline hidden-lg-inline">Kind and Name</span>
          <span class="visible-lg-inline">Name</span>
        </th>
        <th id="kind" ng-if="!resourceKind || !resourceName" class="hidden-sm hidden-md">
          <span class="visible-lg-inline">Kind</span>
        </th>
        <th id="severity" class="hidden-xs hidden-sm hidden-md"><span class="sr-only">Severity</span></th>
        <th id="reason" class="hidden-sm hidden-md"><span class="visible-lg-inline">Reason</span></th>
        <th id="message"><span class="hidden-xs-inline visible-sm-inline visible-md-inline hidden-lg-inline">Reason and </span>Message</th>
      </tr>
    </thead>
    <tbody ng-if="(filteredEvents | hashSize) === 0">
      <tr>
        <td colspan="6">
          <span ng-if="(events | hashSize) === 0"><em>No events to show.</em></span>
          <span ng-if="(events | hashSize) > 0">
            All events hidden by filter.
            <a href="" ng-click="filter.text = ''" role="button">Clear filter</a>
          </span>
        </td>
      </tr>
    </tbody>
    <tbody ng-repeat="event in filteredEvents">
      <tr>
        <td data-title="Time" class="nowrap">{{event.lastTimestamp | date:'mediumTime'}}</td>
        <td ng-if="!resourceKind || !resourceName" data-title="Name">
          <div class="hidden-xs-block visible-sm-block visible-md-block hidden-lg-block">{{event.involvedObject.kind | humanizeKind : true}}</div>
          {{event.involvedObject.name}}
        </td>
        <td ng-if="!resourceKind || !resourceName" class="hidden-sm hidden-md" data-title="Kind">
          {{event.involvedObject.kind | humanizeKind : true}}</td>
        <td data-title="Severity" class="hidden-xs hidden-sm hidden-md text-center severity-icon-td">
          <span class="sr-only">{{event.type}}</span>
          <span class="pficon pficon-warning-triangle-o" ng-show="event.type === 'Warning'" aria-hidden="true" data-toggle="tooltip" data-original-title="Warning"></span></td>
        <td class="hidden-sm hidden-md" data-title="Reason">
          {{event.reason | sentenceCase}}&nbsp;<span class="visible-xs-inline pficon pficon-warning-triangle-o" ng-show="event.type === 'Warning'" aria-hidden="true" data-toggle="tooltip" data-original-title="Warning"></span>
        </td>
        <td data-title="Message">
          <div class="hidden-xs-block visible-sm-block visible-md-block hidden-lg-block">
            {{event.reason | sentenceCase}}&nbsp;
            <span class="pficon pficon-warning-triangle-o" ng-show="event.type === 'Warning'" aria-hidden="true" data-toggle="tooltip" data-original-title="Warning"></span>
          </div>
          {{event.message}}
          <div ng-if="event.count > 1" class="text-muted small">
            {{event.count}} times in the last
            <duration-until-now timestamp="event.firstTimestamp" omit-single="true" precision="1"></duration-until-now>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
